<template>
  <xdh-layout
    :fixed="true"
    class="app-layout"
    :west="{width:asideWidth}"
    :footer-in-main="true"
    :east="false">
    <top-header slot="north" :show-title="asideWidth==='250px'"></top-header>
    <div ref="main" class="app-layout__main">
      <nav-tabs></nav-tabs>
      <div class="app-layout__content page-container" ref="content">
        <keep-alive>
          <router-view :class="{'guide-content':isGuide}"></router-view>
        </keep-alive>
      </div>
    </div>
    <sidebar slot="west" :width.sync="asideWidth"></sidebar>
    <copyright slot="south"></copyright>
  </xdh-layout>
</template>


<script>
  import XdhLayout from '@/widgets/xdh-layout'
  import TopHeader from './top-header.vue'
  import Sidebar from './sidebar.vue'
  import Copyright from './copyright.vue'
  import NavTabs from './nav-tabs.vue'

  export default {
    componentName: 'Layout',
    components: {
      XdhLayout,
      TopHeader,
      Sidebar,
      Copyright,
      NavTabs
    },
    data() {
      return {
        asideWidth: '250px',
        tabsStoreName: 'systemTabs',
        isGuide: false
      }
    },
    watch: {
      '$route.path': {
        immediate: true,
        handler(path) {
          this.isGuide = path.includes('guide')
          this.$refs.content && (this.$refs.content.scrollTop = 0)
        }
      }
    }
  }
</script>
